<!--
 * @FileDescription: 用户信息列表（仅管理员可见）
 * @Author: 周沿江
 * @Date: 2021/6/25
 * @LastEditors: 周沿江
 -->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-filter"></i> 用户信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="hidden">



     <el-row :gutter="20">
       <el-col :span="7" >
          <div> 分析任务列表</div>
          <el-scrollbar>
          <el-col :span="24" style="height: 550px;">
            <draggable :options="dragOptions">
              <transition-group tag="div" >
                <el-card :body-style="{padding:'10px'}" :class="admin_info.user_status" v-for="(admin_info,index) in admin_info_list" :key="index" style="margin-top: 10px">
                  <div slot="header"  @click="init_table(admin_info.id)"  >
                  <el-row :gutter="20">
                    <el-col :span="12" ><div class="text item">{{admin_info.username}}</div></el-col>
                    <el-col :span="10" :offset="2"  ><span :class="admin_info.user_status+'-font'" style="font-size: 22px;font-weight: bold" > {{admin_info.user_status_descri}}</span></el-col>
                  </el-row>
                  <div class="text item" style="font-size: 12px;color: gray">电话号码:{{admin_info.phone}}</div>
                    <div class="text item" style="font-size: 12px;color: gray">所属部门:{{admin_info.department.departmentName}} &nbsp;&nbsp;</div>
                  </div>

                  <el-row :gutter="20" >
                    <el-col :span="8">
                      <el-button type="warning" icon="el-icon-setting" plain @click="jump_user_modify(admin_info)">更改用户</el-button></el-col>
                    <el-col :span="8">
                      <el-button type="warning" icon="el-icon-setting" @click="opendialog(index)" plain>查看用户</el-button>

                    </el-col>
                    <el-col :span="8"><el-button  type="danger" icon="el-icon-delete" plain @click="delete_card(index,admin_info.id)">删除用户</el-button>
                    </el-col>
                  </el-row>

                </el-card>
              </transition-group>
            </draggable>
            <!--这是里面的-->
          </el-col>
          </el-scrollbar>
       </el-col>

       <el-dialog  title="收货地址" :visible.sync="dialogVisible">
         <el-form :model="admin_info">
           <el-form-item label="用户名" label-width="120px">
             <el-input v-model="admin_info.username" disabled autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="密码" label-width="120px">
             <el-input v-model="admin_info.password" disabled autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="手机号码" label-width="120px">
             <el-input v-model="admin_info.phone" disabled autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="账号创建时间" label-width="120px">
             <el-input v-model="admin_info.createTime" disabled autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="最后登录时间" label-width="120px">
             <el-input v-model="admin_info.lastLoginTime" disabled autocomplete="off"></el-input>
           </el-form-item>

         </el-form>
       </el-dialog>
       <el-col :span="17" >
         <task_table ref="deep_task_table" :table_height="430" :show_export_button="show_export_button" :show_submit_button="show_submit_button"></task_table>
       </el-col>


     </el-row>

    </el-card>
  </div>
</template>


<script>
//import {task_card} from "../../api/analysis_video_general";
import draggable from 'vuedraggable'
import task_table from '../../module/base_table'
export default {
  components:{
    draggable,
    task_table
  },
  data() {
    return {
      admin_info:[],
      dialogVisible:false,
      admin_info_list: [],
      dragOptions:{
        animation: 120,
        scroll: true,
        group: 'sortlist',
        ghostClass: 'ghost-style'
      },
      show_submit_button: 'none',
      show_export_button:'none',
      column: [{
        "title": "设备编号",
        "field": "uuid",
        "addition": false,
      }, {
        "title": "操作系统",
        "field": "caption",
        "addition": false,
      }, {
        "title": "操作系统位数",
        "field": "osarchitecture",
        "addition": false,
      }, {
        "title": "设备名称",
        "field": "csname",
        "addition": false,
      }],
    }
  },

  methods: {
    /**
     *初始化表格
     */
    async init_task_list(){
      var data =  await this.$http.get('/user/selectAll');

      for(var i=0;i<data.length;i++){
        var one = data[i]
        if(one.roleId===1){
          one['user_status']="success";
          one['user_status_descri']="超级管理员";
        }else if(one.roleId===2){
          one['user_status']="info";
          one['user_status_descri']="设备管理员";
        }
      }

      this.admin_info_list=data;
    },
    /**
     * 点击打开用户详细信息
     * @param id
     */
    opendialog(id){
      this.admin_info=[];
      var admin = this.admin_info_list[id];
      this.admin_info = admin
      this.dialogVisible=true;
    },
    /**
     * 点击跳转用户信息更改页句柄
     * @param admin_info
     */
    jump_user_modify(admin_info){
      this.$router.push({name:"用户信息更改",params:{admin_info:admin_info}})
    },
    /**
     * 删除用户句柄
     * @param index
     * @param id
     */
     delete_card(index,id){
          this.$confirm('确定要删除该用户吗？', '提示', {
              type: 'warning'
            })
          .then(async () => {
            var data = await this.$http.post('/user/deleteById',{id:id});
            if(data=="success"){
              this.$message.success('删除成功');
              const item = this.admin_info_list[index];
              this.admin_info_list.splice(index, 1);
            }else{
              this.$message.error('删除失败');
            }
          })
          .catch(() => {});
    },
    /**
     * 初始化表格数据
     * @param id
     * @returns {Promise<void>}
     */
    async init_table(id) {
      console.log(id)
      var data = await this.$http.get('/device/selectByUserId',{userId:id});
      this.$refs.deep_task_table.init(data, this.column)
    },

  },
  mounted() {
    this.$nextTick(() => {
      this.init_task_list();
    })}
}


</script>

<style scoped>

:root{
  --success:#67c23a;
  --info:#909399;
  --danger:#f56c6c;
  --warning:#e6a23c;
}

.list {
  padding: 30px 0;
}

.list p {
  margin-bottom: 10px;
}

#blank {
  margin-bottom: 20px;
}

#card {
  margin-bottom: 40px;
}

.el-col {
  border-radius: 4px;
}


.text {
  font-size: 14px;
}

.item {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}


.success /deep/ .el-card__header{
  background-color: #f0f9eb;
}
.info /deep/ .el-card__header{
  background-color: #e9e9eb;
}
.danger /deep/ .el-card__header{
  background-color: #fde2e2;
}
.warning /deep/ .el-card__header{
  background-color: #faecd8;
}

.success-font{
  color: rgba(103, 194, 58, 0.5);
}
.info-font{
  color: rgba(144, 147, 153, 0.5);
}
.warning-font{
  color: rgba(230, 162, 60, 0.5);
}
.danger-font{
  color: rgba(245, 108, 108, 0.5);
}



</style>
